import React, { PureComponent, lazy,Suspense } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import { Layout } from 'antd';
import { connect } from 'react-redux'
// import { getUserInfo } from '../../utils/storage'
import LeftNav from '../../components/LeftNav'
import Header from '../../components/Header'
import './index.scss'
const Home = lazy(() => import('../Home'))
const Role = lazy(() => import('../Role'))
const Product = lazy(() => import('../Product'))
const User = lazy(() => import('../User'))
const Category = lazy(() => import('../Category'))
const Bar = lazy(() => import('../Charts/Bar'))
const Line = lazy(() => import('../Charts/Line'))
const Pie = lazy(() => import('../Charts/Pie'))
const NotFound = lazy(() => import('../NotFound/'))

const { Footer, Sider, Content } = Layout;

class Admin extends PureComponent {
  constructor(props){
    super(props)
    this.state={
      // isLogin:Object.keys(getUserInfo()).length === 0,
    }
  }

  render() {
    const user = this.props.user
    // 如果内存没有存储user ==> 当前没有登陆
    if (!user || !user._id) {
      // 自动跳转到登陆(在render()中)
      return <Redirect to='/login' />
    }
    // const {isLogin}=this.state;
    // console.log('isLogin: ', isLogin);
    return (
      <Layout className="admin">
        <Sider>
          <LeftNav></LeftNav>
        </Sider>
        <Layout>
          <Header>Header</Header>
          <Content className="content">
            <Suspense fallback={<div className="route-loading">loading...</div>}>
              <Switch>
                <Redirect exact from='/' to='/home' />
                <Route path="/home" component={Home}></Route>
                <Route path="/role" component={Role}></Route>
                <Route path="/product" component={Product}></Route>
                <Route path="/user" component={User}></Route>
                <Route path="/category" component={Category}></Route>
                <Route path="/charts/bar" component={Bar}></Route>
                <Route path="/charts/line" component={Line}></Route>
                <Route path="/charts/pie" component={Pie}></Route>
                <Route component={NotFound} /> {/*上面没有一个匹配, 直接显示*/}
              </Switch>
            </Suspense>
          </Content>
          <Footer className="footer">推荐使用谷歌浏览器，可以获得更佳页面操作体验</Footer>
        </Layout>
      </Layout>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  {}
)(Admin)